window.onload = function () {
    showShopInfo()
}

function showShopInfo() {
    axios.get("/shop/showShopList").then(resp =>{
        let shopList = resp.data;
        let str =""
        let total = 0;
        shopList.forEach(n =>{
            str += `<tr><td>${n.product.name}</td><td>${n.product.price}</td><td>${n.product.area}</td>
<td><input type="text" value="${n.buyNum}" onblur="updateNum(${n.id},this)"></td><td>${n.buyNum * n.product.price}</td>
<td><input type="button" value="移除商品" onclick="del(${n.id})"></td></tr>`
        total += n.product.price*n.buyNum

        })
        $('data').innerHTML = str;
        $('totalPriceSpan').innerHTML = total
    })
}

/**
 * 移除购物车商品
 * @param shopId 购物车ID
 */
function del(shopId) {
    axios.get("/shop/del",{
        params:{shopId}
    }).then(resp =>{
        if (resp.data == "ok"){
            showShopInfo();
        }
    })
}

function updateNum(shopId,txtObj) {
    var num = parseInt(txtObj.value)
    if (isNaN(num)){
        num=1
    }
    txtObj.value = num
    axios.get("/shop/updateNum",{
        params:{
            shopId,
            num
        }
    }).then(resp =>{
        if (resp.data == "ok"){
            showShopInfo();
        }
    })
}